<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>悬浮球</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: transparent;
      user-select: none;
      -webkit-app-region: no-drag;
    }
    
    #floatingBall {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      background: rgba(0, 0, 0, 0.6);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      margin: 5px;
      -webkit-app-region: no-drag;
    }
    
    #floatingBall:hover {
      background: rgba(0, 0, 0, 0.8);
      transform: scale(1.1);
    }

    #floatingBall.dragging {
      transform: scale(0.95);
      transition: transform 0.1s;
    }
    
    #floatingBall img {
      width: 30px;
      height: 30px;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }
  </style>
</head>
<body>
  <div id="floatingBall">
    <img src="build/application-window.png" alt="悬浮球">
  </div>
  <script>
    const { ipcRenderer } = require('electron')
    const ball = document.getElementById('floatingBall')
    let isDragging = false
    let startPosition = { x: 0, y: 0 }
    
    // 点击事件
    ball.addEventListener('click', (e) => {
      if (!isDragging) {
        ipcRenderer.send('show-quick-apps')
      }
    })
    
    // 拖动功能
    ball.addEventListener('mousedown', (e) => {
      // 只响应左键
      if (e.button !== 0) return

      isDragging = false
      startPosition = { x: e.clientX, y: e.clientY }
      
      document.addEventListener('mousemove', handleDrag)
      document.addEventListener('mouseup', stopDrag)

      // 添加拖动样式
      ball.classList.add('dragging')
    })
    
    function handleDrag(e) {
      const distance = Math.hypot(e.clientX - startPosition.x, e.clientY - startPosition.y)
      if (distance > 3) {  // 降低拖动阈值，使拖动更灵敏
        isDragging = true
        ipcRenderer.send('drag-floating-ball', { x: e.screenX, y: e.screenY })
      }
    }
    
    function stopDrag() {
      document.removeEventListener('mousemove', handleDrag)
      document.removeEventListener('mouseup', stopDrag)

      // 移除拖动样式
      ball.classList.remove('dragging')
      
      // 延迟重置拖动状态，以防止触发点击事件
      setTimeout(() => {
        isDragging = false
      }, 50)
    }

    // 防止默认拖动行为
    document.addEventListener('dragstart', (e) => {
      e.preventDefault()
    })

    // 防止右键菜单
    document.addEventListener('contextmenu', (e) => {
      e.preventDefault()
      ipcRenderer.send('show-floating-ball-context-menu')
    })
    
    // 监听主进程发来的应用列表更新事件
    ipcRenderer.on('launcher-apps-updated', () => {
      // 当应用列表更新时，下次点击悬浮球会自动加载最新的应用列表
      console.log('应用列表已更新')
    })
  </script>
</body>
</html> 